<template>
  <div class="hotBot">
    <div v-for="(item, index) in hotBot" :key="index">
      <div class="banner">
        <div class="bannerMain">
          <p>
            <span>
              {{ item.newsTageName }}
            </span>
            <span>
              {{ item.newsTageEg }}
            </span>
          </p>
          <p>
            {{ item.newsTageDsc }}
          </p>
        </div>
      </div>
      <div class="botList">
        <div
          v-for="(it, index) in item.hotBotItems"
          :key="index"
          :class="{ lastBot: it.class_true }"
        >
          <router-link
            :to="{
              path: 'botDetail',
              query: { id: it.id },
            }"
            tag="div"
            class="hotBotItem"
          >
            <img :src="it.imgUrl" alt="" />
            <p title="Steam礼物机器人-淘宝版" class="botTitle">
              {{ it.name }}
            </p>
            <p title="" class="botContant">
              {{ it.depict }}
            </p>
          </router-link>
        </div>
      </div>
      <div class="page">
        <div class="pageInfo"></div>
        <a-pagination :total="50" show-less-items />
      </div>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      hotBot: [
        {
          newsTageName: "全部的BOT",
          newsTageEg: "ALL BOT",
          newsTageDsc: "这些是我们精心为您推荐的BOT",
          hotBotItems: [
            {
              id: 200001,
              name: "Steam礼物机器人-淘宝版",
              imgUrl:
                "https://cdnhdblog.steamrobot.me/FjXUkCbdVBPHsGjYbIuJWgjaC7cW",
              depict:
                "Steam礼物机器人(淘宝版)适用于淘宝/天猫平台游戏代购店铺自动发货，帮助商家实现24小时Steam游戏代购自动发货，和每天重复上百次的发货工作说再见。",
            },
            {
              id: 200002,
              name: "Steam礼物机器人-激活码版",
              imgUrl:
                "https://cdnhdblog.steamrobot.me/FjXUkCbdVBPHsGjYbIuJWgjaC7cW",
              depict:
                "Steam礼物机器人(淘宝版)适用于淘宝/天猫平台游戏代购店铺自动发货，帮助商家实现24小时Steam游戏代购自动发货，和每天重复上百次的发货工作说再见。",
            },
            {
              id: 200003,
              name: "Steam饰品机器人-淘宝版",
              imgUrl:
                "https://cdnhdblog.steamrobot.me/FjXUkCbdVBPHsGjYbIuJWgjaC7cW",
              depict:
                "Steam礼物机器人(淘宝版)适用于淘宝/天猫平台游戏代购店铺自动发货，帮助商家实现24小时Steam游戏代购自动发货，和每天重复上百次的发货工作说再见。",
            },
            {
              class_true: true,
              name: "Steam礼物机器人-淘宝版",
              imgUrl:
                "https://cdnhdblog.steamrobot.me/FjXUkCbdVBPHsGjYbIuJWgjaC7cW",
              depict:
                "Steam礼物机器人(淘宝版)适用于淘宝/天猫平台游戏代购店铺自动发货，帮助商家实现24小时Steam游戏代购自动发货，和每天重复上百次的发货工作说再见。",
            },
          ],
        },
      ],
    };
  },
};
</script>

<style lang="less" scoped>
.hotBot {
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  padding-bottom: 80px;
  .banner {
    width: 100%;
    height: 372px;
    background-color: #2e2f3a;
    background-image: url(../static/xinwen.png);
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
    .bannerMain {
      width: 1200px;
      p:first-child {
        font-size: 40px;
        font-family: Microsoft YaHei;
        font-weight: 700;
        color: #fff;
        span:last-child {
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          color: #494b5a;
        }
      }
      p:last-child {
        font-size: 14px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        color: #fff;
        margin-top: 35px;
        width: 500px;
      }
    }
  }
  .botList {
    width: 1200px;
    margin: 69px auto 0;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    > div {
      margin-right: 29px;
      margin-bottom: 34px;
      .hotBotItem {
        cursor: pointer;
        width: 278px;
        background: #fff;
        border: 1px solid #e5e5e5;
        box-shadow: 0 2px 19px 2px #ddd;
        box-sizing: border-box;
        padding: 18px 12px 28px;
        img {
          width: 100%;
          max-height: 252px;
        }
        .botTitle {
          width: 100%;
          font-family: Microsoft YaHei;
          box-sizing: border-box;
          padding-left: 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 14px;
          font-weight: 600;
          color: #111;
          margin-top: 15px;
          white-space: nowrap;
        }
        .botContant {
          width: 100%;
          font-family: Microsoft YaHei;
          box-sizing: border-box;
          padding-left: 12px;
          overflow: hidden;
          text-overflow: ellipsis;
          font-size: 12px;
          font-weight: 400;
          color: #999;
          margin-top: 4px;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
        }
      }
    }
    .lastBot {
      margin-right: 0;
    }
  }
  .page {
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 40px;
  }
}
</style>